import React, { useEffect, useState } from 'react';
import {
  leiJUList,
  characterList,
  banner2,
  yueqiList,
  zuo,
  you,
} from './index.config';
import { useHistory } from 'umi';
import './index.less';
import Title from '../component/Title';
import { CSSTransition } from 'react-transition-group';
export default function index() {
  const history = useHistory();
  const [isVisible, setIsVisible] = useState(false);
  const [isCharacter, setIsCharacter] = useState(false);
  const [isShowBanner, setIsShowBanner] = useState(false);
  const [page, setPage] = useState(0);
  let maxPage = leiJUList.length - 3;
  const toLeft = () => {
    if (page == maxPage) return;
    let newPage = page + 1;
    setPage(newPage);
  };
  const toRight = () => {
    if (page == 0) return;
    let newPage = page - 1;
    setPage(newPage);
  };
  const handleScroll = () => {
    const scrollPosition = window.scrollY;
    scrollPosition > 110 && setIsCharacter(true);
  };
  useEffect(() => {
    setTimeout(() => {
      setIsVisible(true);
      setIsShowBanner(true);
    }, 1150);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);
  return (
    <div className="popular-science">
      <div className={`banner ${isShowBanner ? 'show' : ''}`}>
        <img src={banner2} alt="" />
      </div>
      <CSSTransition
        in={isVisible} // 控制动画是否开始，true 表示开始动画
        timeout={5000} // 动画过渡的时间，单位毫秒
        classNames="fade" // 指定动画的 class 名称
        unmountOnExit // 动画退出时卸载组件
      >
        <div className="science-cloth">
          <Title></Title>
          <div className="cloth-content">
            <div
              className="left"
              onClick={() => {
                toLeft();
              }}
            >
              <img src={zuo} alt="" />
            </div>
            <div className="list-box">
              <div
                className="list"
                style={{
                  transform: `translateX(-${page * 246}px)`,
                }}
              >
                {leiJUList.map((val) => {
                  return (
                    <div className="box-item">
                      <img src={val.img} alt="" />
                      <div className="box-title">{val.title}</div>
                    </div>
                  );
                })}
              </div>
            </div>
            <div
              className="right"
              onClick={() => {
                toRight();
              }}
            >
              <img src={you} alt="" />
            </div>
          </div>
        </div>
      </CSSTransition>
      <CSSTransition
        in={isCharacter} // 控制动画是否开始，true 表示开始动画
        timeout={5000} // 动画过渡的时间，单位毫秒
        classNames="fade" // 指定动画的 class 名称
        unmountOnExit // 动画退出时卸载组件
      >
        <div className="science-character">
          <Title title="雷剧妆容角色" enTitle="LeiJu Makeup"></Title>
          <div className="character-content">
            <div className="content-insert">
              {characterList.map((val) => {
                return (
                  <div className="chart-item">
                    <div className="left-item">
                      <img src={val.img} alt="" />
                      <div className="left-text">{val.title}</div>
                    </div>
                    <div className="right-item">
                      <div className="right-desc">{val.desc}</div>
                      <div className="button">了解更多</div>
                    </div>
                  </div>
                );
              })}
            </div>
            <div
              className="button-text"
              onClick={() => {
                history.push('/popularMore');
              }}
            >
              更多角色介绍
            </div>
          </div>
        </div>
      </CSSTransition>
      <div className="science-yueqi">
        <Title title="特色乐器" enTitle="Featured musical instruments"></Title>
        <div className="yueqi-content">
          {yueqiList.map((val) => {
            return (
              <div className="yueqi-item">
                <img src={val.img} alt="" />
                <div className="button">点击播放</div>
                <div className="audio">
                  <audio controls>
                    <source src={val?.audio} type={val.type} />
                    Your browser does not support the audio element.
                  </audio>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}
